<template>
  <div class="add-model" :class="isMenuCollapsed ? 'add-model-long' : ''" v-show="showSaveBar">
    <div class="add-model__left">
      已选择<span>{{ selectedNum }}</span
      >项
    </div>
    <slot name="footer">
      <div>
        <el-button @click="addRowCancel">取消</el-button>
        <el-button v-if="!saveBtn" type="primary" @click="addRowSave">保存</el-button>
        <FIButton v-else type="primary" :id="saveBtn" customType @click="addRowSave">保存</FIButton>
      </div>
    </slot>
  </div>
</template>
<script lang="ts" setup>
import { ref, defineEmits, computed, watch } from 'vue'
import LocalCache from '@/utils/cache'
import { useSystemStore } from '@/stores/system'
import { storeToRefs } from 'pinia'

const props = defineProps({
  showSaveBar: {
    type: Boolean,
    default: false,
  },
  selectedNum: {
    type: Number,
    default: 0,
  },
  // 表格修改新增保存按钮id
  saveBtn: {
    type: String,
    default: '',
  },
})
// const systemState = ref(LocalCache.getCache('system'))
const systemStore = useSystemStore()
const { isMenuCollapsed } = storeToRefs(systemStore)
// const isMenuCollapsed = computed(() => {
//   // return JSON.parse(JSON.stringify(prop.tableData))
//   console.log('isMenuCollapsed----', systemState.value?.isMenuCollapsed)
//   return !systemState.value?.isMenuCollapsed
// })
// console.log('system------', systemState.value)
// const isShowSaveBar = ref(props.showSaveBar)
const emit = defineEmits(['row-add-cancel', 'row-add-save', 'update:columnItem'])

const prefixClass = 'oy-table-add-model'
const addRowCancel = () => {
  emit('row-add-cancel')
}
const addRowSave = () => {
  emit('row-add-save')
}
</script>
<style lang="less" scoped>
.add-model {
  position: fixed;
  // width: 100%;
  width: calc(100% - 200px);
  bottom: 0;
  left: 200px;
  // margin-left: -24px;
  padding-left: 24px;
  padding-right: 24px;
  display: flex;
  align-items: center;
  height: 64px;
  background: #ffffff;
  box-shadow: 4px -1px 12px 0px rgba(0, 0, 0, 0.08);
  z-index: 999;
  justify-content: space-between;
}
.add-model-long {
  width: calc(100% - 60px);
  left: 60px;
}
.add-model__left {
  span {
    margin: 0 5px;
    color: var(--el-color-primary);
  }
}
</style>
